<template lang="pug">
  div.body
    div.mbx
      span.ml24 我的课表
      div(@click="$router.push('/educational/curriculum')")
        span 教务排课
        img(src="@/assets/right.png")
    div.nrr
      el-row.nr(:gutter="20")
        el-col(:span="20")
          form-box.form-box(
          ref="form"
          :fields="curriculumFields"
          :baseData="{ classesId, weekDay }"
          isFilter
          :showBtns="false"
          )
      el-tabs.dateTtab(v-model="weekDayValue" stretch)
        el-tab-pane(v-for="day in weekDays" :key="day" :name="day" :label="day")
      .content
        s-table(
          ref="curriculumTable"
          :column="curriculum.column"
          :data="nurseryScheduleRecordList"
        )
          template(slot="beginDate" slot-scope="text, scope") {{text | dateFilter('HH:mm')}} ~ {{scope.endDate | dateFilter('HH:mm')}}
          template(slot="category" slot-scope="text, scope") {{dictFilter(text, 'courseCategory', 'category')}}
</template>
<script>
const dateFormatStr = 'YYYY/MM/DD'
import dayjs from 'dayjs'
import { getNurseryClasses, getNurserySchule } from '../curriculum/api'
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const initDay = new Date().getDay()
import { getDateFromWeek } from '@/utils/date'
export default {
  data () {
    return {
      classes: [], // 班级列表
      classesId: '', // 排课班级
      weekDay: new Date(), // 排课日期
      weekDays, // 周列表
      weekDayValue: weekDays[initDay === 0 ? 6 : initDay - 1], // 周几
      curriculum: {
        column: [
          {
            prop: 'activityContent',
            label: '课程内容'
          },
          {
            prop: 'beginDate',
            label: '时间'
          },
          {
            prop: 'category',
            label: '课程种类'
          }
        ]
      },

      nurseryScheduleId: '', // 当前日期的排课id
      nurseryScheduleRecordList: [] // 当前日期的排课列表
    }
  },
  computed: {
    weekDuration () {
      return getDateFromWeek(this.weekDay)
    },
    curDateStr () {
      const { weekDay } = this
      return dayjs(weekDay).format(dateFormatStr)
    },
    curriculumFields () {
      const { classesId, weekDay, classes } = this
      return [
        {
          key: 'classesId',
          type: 'select',
          initialValue: classesId,
          fieldProps: {
            placeholder: '班级选择',
            options: classes,
            props: { value: 'classesId', label: 'classesName' }
          },
          events: {
            change: val => this.searchFormChange(val, 'classesId')
          }
        },
        {
          key: 'weekDay',
          type: 'week',
          initialValue: weekDay,
          fieldProps: {
            pickerOptions: { firstDayOfWeek: 1 },
            format: 'yyyy 第 WW 周',
            placeholder: '时间选择'
          },
          events: {
            change: val => this.searchFormChange(val, 'weekDay')
          }
        }
      ]
    }
  },
  watch: {
    // 获取详情监听
    weekDay () {
      this.getInfo()
    },
    classesId () {
      this.getInfo()
    },
    // 周几变化了，日期也要变化
    weekDayValue (val) {
      const { weekDuration } = this
      this.weekDay = new Date(weekDuration.dateArr[weekDays.indexOf(val)])
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    // 获取排课详情
    getInfo () {
      const { classesId, curDateStr } = this
      this.loading = true
      getNurserySchule({ classesId, courseDateStr: curDateStr }).then(res => {
        this.nurseryScheduleId = res?.nurseryScheduleId
        this.nurseryScheduleRecordList = res?.nurseryScheduleRecordList || []
      }).finally(() => {
        this.loading = false
      })
    },
    // 搜索栏form表单
    searchFormChange (val, key) {
      this[key] = val
    },
    // 获取托班班级列表
    async getClasses () {
      const { classes } = this
      if (classes.length < 1) {
        this.classes = await (getNurseryClasses() || [])
      }
      this.classesId = this.classes[0]?.classesId || ''
    }
  }
}
</script>
<style  lang="scss" scoped>
.el-tabs__item {
  padding: 0 !important;
}
</style>
<style lang="scss">
.body {
  margin-right: 16px;
  flex: 1;
}

.nr {
  margin: 0 !important;
  position: relative;
  left: -10px;
}

// .content {
//   height: 392px;
//   overflow: scroll;
// }

.content::-webkit-scrollbar {
  display: none
}

.nrr {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}

.mbx {
  padding: 0 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;

  div {
    cursor: pointer;
    display: flex;
    align-items: center;

    span {
      font-weight: 400;
      font-size: 14px;
      color: #77778C;
      margin-right: 12px;
      line-height: 0;
    }
  }
}

.form-box {
  padding: 0;
}
</style>
